<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付宝二维码付款</title>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
</head>
<body>
<a href="javascript:void(0);" onclick="Pay()">点击生成付款二维码</a>
<div id="Orcode_div" style="height: 165px;width: 165px"></div>
</body>
<script type="application/javascript">
    //项目名称
    var basePath = "";
    //商户订单编号
    var orderId;
    //预下单
    function Pay(){
        $.ajax({
            url: basePath + '/pay/face-to-face?orderId=123987&passengerId=12&price=100.99',
            method: 'post',
            async: false,  //是否异步请求  默认true,false为同步请求 ，true为异步请求）
            dataType: 'JSON',
            success: function (res) {
                //商户订单编号
                orderId=res.data.orderId;
                //创建订单二维码
                createQrcode(res.data.qrcode);
            }
        })
    }
    var zfbQRCode;
    //生成付款二维码
    function createQrcode(url){
        if (zfbQRCode!=undefined && zfbQRCode!='') {
            //清空之前的二维码
            $("#Orcode_div canvas").remove()
            $("#yes_qrcode").hide();
        }
        //生成二维码放入”Orcode_div“ div
        zfbQRCode=$('#Orcode_div').qrcode({
            width: 168, //宽度
            height: 168, //高度
            text:url
        });
    }

    //定时任务
    var trade;
    //记录是否通知页面“用户已扫码”
    var findNumber = true
    /**
     * 查询交易状态
     */
    function findZFB_trade(){
        trade = setInterval(function(){
            console.log("每3秒执行一次");
            $.ajax({
                url: basePath +'/pay/check-trade-action',
                method: 'post',
                async: false,  //是否异步请求  默认truefalse为同步请求 ，true为异步请求）
                data: {
                    "orderId": orderId
                },
                dataType: 'JSON',
                success: function (res) {
                    if (res.code=='10000' && res.data=='non-payment'){
                        //订单已经创建但未支付（用户扫码后但是未支付）
                        if (findNumber){
                            console.log("用户已扫码但是未支付");
                            findNumber=false;
                        }
                    }else if (res.code=='10000' && res.data=='yes-payment'){
                        //阻止定时
                        window.clearInterval(trade);
                        alert("订单已支付，感谢支持。。。");
                    }
                }
            })
        },3000);
    }

</script>
</html>
